<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div v-auth-dir="`park:propertyFee:list`" class="search-container">
      <span class="search-label">企业名称：</span>
      <el-input
        v-model="params.enterpriseName"
        clearable
        placeholder="请输入内容"
        class="search-main"
      />
      <span class="search-label">缴纳时间：</span>
      <el-date-picker
        v-model="selectDate"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy - MM - dd"
        value-format="yyyy-MM-dd"
      />
      <el-button
        v-auth-dir="`park:propertyFee:query`"
        type="primary"
        class="search-btn"
        @click="serachFn"
      >查询</el-button>
    </div>
    <div class="btn-top">
      <el-button v-auth-dir="`park:propertyFee:add`" type="primary" @click="openDialog()">添加账单</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="propertyList">
        <el-table-column type="index" label="序号" />
        <el-table-column label="账单编号" prop="billNumber" />
        <el-table-column label="企业名称" prop="enterpriseName" />
        <el-table-column label="租赁楼宇" prop="buildingName" />
        <el-table-column label="物业费（元/m²）" prop="propertyFeePrice" />
        <el-table-column label="账单金额（元）" prop="paymentAmount" />
        <el-table-column label="缴费时间" prop="createTime" />
        <el-table-column
          label="操作"
          show-overflow-tooltip
        >
          <template #default="scoped">
            <el-button
              v-auth-dir="`park:propertyFee:query`"
              size="mini"
              type="text"
              @click="openDialog(scoped.row)"
            >查看</el-button>
            <el-button
              v-auth-dir="`park:propertyFee:remove`"
              size="mini"
              type="text"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :page-size="params.pageSize"
        :total="total"
        @current-change="handlePage"
      />
    </div>
    <!-- 打开对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="30%"
    >

      <div v-if="title==='查看账单'">
        <el-row class="font-size">
          <el-col :span="8" class="text-right">
            <span>租户名称:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ checkedProperty.enterpriseName }}</span>
          </el-col>
        </el-row>
        <el-row class="font-size">
          <el-col :span="8" class="text-right">
            <span>租赁楼宇:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ checkedProperty.buildingName }}</span>
          </el-col>
        </el-row>
        <el-row class="font-size">
          <el-col :span="8" class="text-right">
            <span>缴费周期:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ checkedProperty.startTime }}至{{ checkedProperty.endTime }}</span>
          </el-col>
        </el-row>
        <el-row class="font-size">
          <el-col :span="8" class="text-right">
            <span>物业费(元/m²):</span>
          </el-col>
          <el-col :span="16">
            <span>{{ checkedProperty.propertyFeePrice }}</span>
          </el-col>
        </el-row>
        <el-row class="font-size">
          <el-col :span="8" class="text-right">
            <span>账单金额(元):</span>
          </el-col>
          <el-col :span="16">
            <span>{{ checkedProperty.paymentAmount }}</span>
          </el-col>
        </el-row>
        <el-row class="font-size">
          <el-col :span="8" class="text-right">
            <span>支付方式:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ paymentStatus[checkedProperty.paymentMethod] }}</span>
          </el-col>
        </el-row>
        <el-row class="font-size">
          <el-col :span="8" class="text-right">
            <span>缴费时间:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ checkedProperty.createTime }}</span>
          </el-col>
        </el-row>
      </div>
      <div v-else>
        <!-- 添加账单 -->
        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="选择租户：" prop="enterpriseId">
            <template>
              <el-select v-model="addForm.enterpriseId" width="100%" placeholder="请选择租赁的企业">
                <el-option
                  v-for="item in enterpriseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="租赁楼宇：" prop="buildingId" placeholder="请选择租赁的楼宇">
            <template>
              <el-select v-model="addForm.buildingId" @change="changeEnterprisePrice">
                <el-option
                  v-for="item in buildingList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="缴费周期：" prop="paymentDate">
            <el-date-picker
              v-model="addForm.paymentDate"
              class="full-font-item"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy - MM - dd"
              value-format="yyyy-MM-dd"
              @change="changeEnterprisePrice"
            />
          </el-form-item>
          <el-form-item label="支付金额：">
            <el-input v-model="addForm.paymentAmount" disabled />
          </el-form-item>
          <el-form-item label="支付方式：" prop="paymentMethod">
            <template>
              <el-select v-model="addForm.paymentMethod">
                <el-option
                  v-for="item in paymentMethod"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPropetFeeListAPI, getEnterpriseListAPI, getBuildingListAPI, getPaymentPropetFeeAPI, createPropetFeeAPI } from '@/apis/propety'
export default {
  data() {
    return {
      params: {
        enterpriseName: '',
        start: '',
        end: '',
        page: 1,
        pageSize: 5
      },
      selectDate: [],
      propertyList: [],
      total: 0,
      centerDialogVisible: false,
      checkedProperty: {
        billNumber: '',
        buildingId: null,
        buildingName: '',
        creoateTime: '',
        endTime: '',
        enterpriseName: '',
        enterpriseId: null,
        id: null,
        paymentAmount: null,
        paymentMethod: '',
        propertyFeePrice: null,
        startTime: ''
      },
      paymentStatus: {
        0: '支付宝',
        1: '微信',
        2: '现金'
      },
      title: '',
      addForm: {
        enterpriseId: null,
        buildingId: null,
        paymentAmount: null,
        paymentMethod: null,
        startTime: '',
        endTime: '',
        paymentDate: ''
      },
      addFormRules: {
        enterpriseId: [
          { required: true, message: '请选择租赁的企业', trigger: 'change' }
        ],
        buildingId: [
          { required: true, message: '请选择租赁的楼宇', trigger: 'change' }
        ],
        paymentDate: [
          { required: true, message: '请选择需要缴费的时间段', trigger: 'change' }
        ],
        paymentMethod: [
          { required: true, message: '请选择支付方式', trigger: 'change' }
        ]
      },
      paymentMethod: [
        { value: '1', label: '微信' },
        { value: '2', label: '支付宝' },
        { value: '3', label: '现金' }
      ],
      enterpriseList: [], // 企业的列表信息
      buildingList: [] // 楼宇的列表信息
    }
  },
  computed: {
  },
  created() {
    this.getPropetFeeList()
    this.getEnterpriseList()
    this.getBuildingList()
  },
  methods: {
    // 修改当前页码
    handlePage(nextPage) {
      this.params.page = nextPage
      this.getPropetFeeList()
    },
    // 查询功能
    serachFn() {
      // this.params.page = 1
      if (this.selectDate) {
        this.params.start = this.selectDate[0]
        this.params.end = this.selectDate[1]
      }
      // console.log(this.params)
      this.getPropetFeeList()
    },
    // 获取账单列表
    async getPropetFeeList() {
      const res = await getPropetFeeListAPI(this.params)
      console.log(res)
      this.propertyList = res.data.rows
      this.total = res.data.total
      if (this.selectDate) {
        this.params.start = ''
        this.params.end = ''
      }
    },
    // 打开对话框
    openDialog(row) {
      this.centerDialogVisible = true
      if (row) {
        this.title = '查看账单'
        this.checkedProperty = row
        // checkedProperty.startTime.substring(0, 10) }}至{{ checkedProperty.endTime.substring(0, 10)
        this.checkedProperty.startTime = this.checkedProperty.startTime.substring(0, 10)
        this.checkedProperty.endTime = this.checkedProperty.endTime.substring(0, 10)
      } else {
        this.title = '添加账单'
      }
    },
    // 获取企业信息列表
    async getEnterpriseList() {
      const res = await getEnterpriseListAPI()
      // console.log(res)
      this.enterpriseList = res.data
    },
    // 获取楼宇的信息列表
    async getBuildingList() {
      const res = await getBuildingListAPI()
      this.buildingList = res.data
    },
    // 计算物业预算金额
    async changeEnterprisePrice() {
      if (!(this.addForm.buildingId && this.addForm.paymentDate)) {
        // console.log(11)
        return
      }
      this.addForm.startTime = this.addForm.paymentDate[0]
      this.addForm.endTime = this.addForm.paymentDate[1]
      const res = await getPaymentPropetFeeAPI(this.addForm)
      console.log(res)
      this.addForm.paymentAmount = res.data.paymentAmount
    },
    // 添加账单
    async onSubmit() {
      await this.$refs.addForm.validate()
      this.addForm.startTime = this.addForm.paymentDate[0]
      this.addForm.endTime = this.addForm.paymentDate[1]
      delete this.addForm.paymentDate
      // console.log(this.addForm)
      const res = await createPropetFeeAPI(this.addForm)
      // console.log(res)
      if (res.code === 10000) {
        this.$message({
          type: 'success',
          message: res.msg
        })
        this.addForm.paymentAmount = 0
        this.centerDialogVisible = false
        await this.$refs.addForm.resetFields()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-top{
  margin-top: 10px;
}
.full-font-item{
  width: 100%;
}
.font-size{
  font-size: 15px;
  // text-align: center;
  margin-bottom: 20px;
  span{
    margin-left: 10px;
    text-align: left;
  }
}
.text-right{
  // margin-bottom:10px;
  text-align: right;
  // margin: 10px;
  color: #cccccc;
}
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-main {
    width: 220px;
    margin-right: 10px;
  }

  .search-btn {
    margin-left: 20px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>
